<template>
  <div class="dis-flex flex-sbc">
    <div>
      切换直播线路：
      <el-button
        v-for="(v, k) in arrLine"
        :key="k"
        :type="解决方案 == v ? 'primary' : 'info'"
        size="small"
        @click="switchLine(v)"
      >
        线路{{ v }}
      </el-button>

      <el-button type="info" size="small" @click="switchLine()">
        <i class="fa fa-fw fa-rotate-right"></i>
      </el-button>
    </div>
    <div>{{ 在线人数 }}人在线</div>
  </div>
</template>
<script>
import { bus } from '@/bus.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'switchLine',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      arrLine: (() => {
        return new Array(2).fill(1).map((v, i) => {
          return i + 1;
        });
      })(),
      解决方案: '1',
      在线人数: 1,
    };
  },
  computed: {
    ...mapState(['objRoom']),
    roomId: function() {
      return this._.get(this.objRoom, 'roomId', NaN);
    },
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },
    switchLine: function(num) {
      if (num) this.解决方案 = num;
      this.$message({
        type: 'warning',
        message: '正在为您切换适合的频道',
        duration: 1000 * 0.7,
        onClose: () => {
          console.log(this.解决方案);
          if (this.解决方案 == 1) {
            this.$router.push({
              path: `/login`,
              query: { ...this.$route.query },
            });
          }
          if (this.解决方案 == 2) {
            bus.$emit('replayer');
          }
        },
      });

      // this.$toasted.show('正在为您切换适合的频道', {
      //   type: 'info',
      //   duration: 1000 * 0.7,
      //   onComplete: () => {
      //     if (this.解决方案 == 1) {
      //       this.$router.push({
      //         path: `/login`,
      //         query: { ...this.$route.query },
      //       });
      //     }
      //     if (this.解决方案 == 2) {
      //       bus.$emit('replayer');
      //     }
      //   },
      // });
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    bus.$on('某房间在线人数更新', (wsMsg) => {
      console.log(
        '%c [ wsMsg ]-91',
        'font-size:13px; background:pink; color:#bf2c9f;',
        wsMsg
      );
      if (wsMsg.roomId == this.roomId) {
        this.$set(this, '在线人数', wsMsg.memberCount);
      }
    });
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {
    bus.$off('某房间在线人数更新');
  },
  destroyed: function() {},
};
</script>
<style lang="less" scoped></style>
